<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/12/22
  Time: 20:18
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>登录</title>
    <link href="/statics/css/bootstrap.css" rel="stylesheet"/>
</head>
<body class="d-flex justify-content-center align-items-center" style="min-height:600px">

<div class="bg-light w-50 p-5 shadow d-flex justify-content-center">
    <form id="loginForm" action="/login" method="post" class="w-75">
        <h1>超市管理系统</h1>

        <div class="form-group">
            <label>账号</label>
            <input type="text" name="loginName" class="form-control">
        </div>
        <div class="form-group">
            <label>密码</label>
            <input type="password" name="pwd" class="form-control" >
        </div>

        <button type="button" class="btn btn-primary">登录</button>
        <div class="alert text-danger  <c:if test="${msg==null}">d-none</c:if>"> ${msg}</div>
    </form>
</div>
<script src="/statics/js/jquery.js" type="text/javascript"></script>
<script src="/statics/js/bootstrap.js" type="text/javascript"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            let error = "";
            let loginForm = $("#loginForm");
            if (loginForm.find("input[name=loginName]").val() == "") error += "请输入登录名<br>";
            if (loginForm.find("input[name=pwd]").val() == "") error += "请输入密码<br>";
            if (error != "") {
                loginForm.find("div[class~=alert]").html(error);
                loginForm.find("div[class~=alert]").removeClass("d-none");
            } else {
                loginForm.find("div[class~=alert]").addClass("d-none");
                loginForm.submit();
            }
        });
    });
</script>


</body>
</html>
